simViewUi = Ext.extend(Ext.Panel, {
	border : false,
	autoScroll : true,
	frame : false,
	initComponent : function(arguments) {

		var dimentions = getDimentions();
		var winW = dimentions.screenWidth;
		var winH = dimentions.screenHeight;

		var panelQ = new Ext.Panel({
		});
		
		var numMins = 90;
		
		var clock = new Ext.Toolbar.TextItem('');
		
		var panel = new Ext.Panel({
			border: true,
			height : winH * .75,
			title: 'OCJP Exam Simulation Tool',
			tbar: new Ext.Toolbar({
				hidden: true, 
				items: [{xtype: 'tbseparator'},{
						text: '&nbsp;&nbsp;&nbsp;Translate',
						iconCls: 'silk-flag-mex',
						disabled: false
					},{xtype: 'tbseparator'},'->',{xtype: 'tbseparator'},{
						text: 'Show Explanations',
						iconCls: 'silk-bell',
						disabled: false
					},{xtype: 'tbseparator'},{
						text: 'End Exam',
						iconCls: 'silk-application-go',
						disabled: false
					},{xtype: 'tbseparator'}]
			}),
			bbar: new Ext.Toolbar({
				hidden: true,
				items: [{
						xtype: 'checkbox',
						boxLabel: 'Mark',
						disabled: true
					},'->',{xtype: 'tbseparator'},{
						text: 'back',
						disabled: true,
						iconCls: 'silk-arrow-left'
					},{xtype: 'tbseparator'},{
						text: 'next',
						disabled: true,
						iconCls: 'silk-arrow-right'
					},{xtype: 'tbseparator'},clock]
			}),
			buttons: [{
				text: 'Practice',
				iconCls: 'silk-user-edit',
				handler: function (){
					viewPractice();
				}
			},{
				text: 'Simulate',
				iconCls: 'silk-wand'
			},{
				xtype: 'tbspacer',
				width: 10
			},{
				text: 'View History',
				iconCls: 'silk-calendar'
			}],
			items:[panelQ]
		});
		
		function startCounter(){
		    Ext.TaskMgr.start({
		        run: function(){
		
		            var nu = numMins--;
		            var str;
					if(nu >= 30){
		                str = '<font color="green" style="font-size: 14px; font-weight: bold;" >' + (nu) + " mins. restantes" + '</font>';
		            } else if (nu >= 15 && nu < 30){
		                str = '<font color="orange" style="font-size: 14px; font-weight: bold;">' + (nu) + " mins. restantes" + '</font>';
		            } else if (nu > 0 && nu < 15){
		                str = '<font color="red" style="font-size: 14px; font-weight: bold;">' + (nu) + " mins. restantes" + '</font>';
		            } else if (nu == 0){
		                str = '<font color="red" style="font-size: 14px; font-weight: bold;"> Tiempo terminado </font>';
		            }
		
		    		Ext.fly(clock.getEl()).update(str);
		        },
		        interval: 1000
		    });
		}
		
		this.items = [ panel ];
		
		simViewUi.superclass.initComponent.call(this);
	}

});

simView = Ext.extend(simViewUi, {
	initComponent : function(arguments) {
		simView.superclass.initComponent.call(this);
	}
});
